<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="./mediaPlugin.js"></script>

    <script src="./tinymce/langs/zh_CN.js"></script>
    <script src="./tinymce/tinymce.js" referrerpolicy="origin"></script>

    <!-- 自定义按钮图标 -->
    <!--    <script src="./newicon.js"></script>-->
    <style>
        .class-name {
            background-color: red;
        }

        .zks {
            background-color: red;
        }
    </style>
    <script>
        tinymce.init({
            selector: "#mytextarea",
            //skin:'oxide-dark',
            language: "zh_CN",
            // icons: "christmas",
            // menubar:false,
            menu: {
                happy: {
                    title: '自定义菜单',
                    items: 'styles help formatselect',
                },
                custools:
                    {
                        title: '自定工具',
                        items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount'
                    },
            },
            menubar: "file edit view insert  tools  format table help  happy custools",
            // 样式自定义格式化
            formats: {

                bold: {inline: 'span', block: 'div', styles: {color: '#f00'}, 'classes': 'zks'},
                forecolor: {inline: 'span', styles: {color: '%value', backgroundColor: '#ccc'}},
                // custom_format: {block: 'h1', attributes: {title: 'Header'}, styles: {color: 'red'}}
            },
            plugins: `accordion
            format
                  advlist
                  anchor
                  autolink
                  autoresize
                  autosave
                  axupimgs
                  bdmap
                  charmap
                  code
                  codesample
                  directionality
                  emoticons
                  export
                  formatpainter
                  fullscreen
                  help
                  hr
                  image
                  imagetools
                  indent2em
                  insertdatetime
                  link
                  lists
                  media
                  nonbreaking
                  pagebreak
                  preview
                  print
                  save
                  searchreplace
                  table
                  template
                  textpattern
                  visualblocks
                  visualchars
                  wordcount
                  `,
            // statusbar: false,最下面状态信息
            /*content_css: [ //可设置编辑区内容展示的css，谨慎使用
                      '/static/reset.css',
                      '/static/ax.css',
                      '/static/css.css',
                  ],*/

            link_list: [
                {title: "预置链接1", value: "http://www.tinymce.com"},
                {title: "预置链接2", value: "http://tinymce.ax-z.cn"},
            ],
            image_list: [
                {
                    title: "预置图片1",
                    value: "https://www.tiny.cloud/images/glyph-tinymce@2x.png",
                },
                {
                    title: "预置图片2",
                    value: "https://www.baidu.com/img/bd_logo1.png",
                },
            ],
            image_class_list: [
                {title: "None", value: ""},
                {title: "自定义样式", value: "class-name"},
            ],
            image_advtab: true,
            //自定义文件选择器的回调内容
            file_picker_types: "file image media",
            images_upload_handler: async function (
                blobInfo,
                success,
                failure,
                progress
            ) {
                const param = new FormData();
                param.append("file", blobInfo.blob());
                param.append("bucket", "workerunion");
                const res = await axios.post({
                    url: "http://192.168.1.107:8109/ebowin-credit/file/upload",
                    data: param,
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                    onUploadProgress: function (e) {
                        progress((e.loaded / e.total) * 100);
                    },
                });
                console.log(res);
            },
            file_picker_callback: function (callback, value, meta) {
                if (meta.filetype === "file") {
                    callback("https://www.baidu.com/img/bd_logo1.png", {
                        text: "My FILE",
                    });
                }
                if (meta.filetype === "image") {
                    callback("https://www.baidu.com/img/bd_logo1.png", {
                        alt: "My IMAGE",
                    });
                }
                // if (meta.filetype === "media") {
                //   callback("movie.mp4", {
                //     source2: "alt.ogg",
                //     poster: "https://www.baidu.com/img/bd_logo1.png",
                //   });
                // }
            },

            // 配置
            height: 650, //编辑器高度
            min_height: 400,
            resize: false,
            auto_focus: true,
            sidebar_show: 'mysidebar',
            // 编辑器加载之前
            setup: function (editor) {
                editor.ui.registry.addIcon("girl", `
              <svg t="1746532554806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1469" width="24" height="24">
              <path d="M811.008 770.048q-9.216 1.024-19.456 3.584t-18.432 5.632q-10.24 4.096-19.456 9.216-2.048-11.264 1.024-22.528 2.048-10.24 8.192-21.504t20.48-22.528q25.6-17.408 60.928-21.504t66.048 8.192 48.128 42.496 6.144 82.432q-9.216 41.984-37.888 76.288t-76.288 52.736-112.128 17.408-144.384-28.672q-55.296-19.456-87.04-48.64t-47.616-59.904-18.944-57.856-1.024-42.496 12.8-37.888 22.016-43.008q13.312-24.576 29.696-50.176 8.192-13.312 14.336-25.6 5.12-11.264 8.192-22.528t0-21.504q-10.24-26.624-25.6-40.96t-29.696-21.504q-17.408-7.168-35.84-8.192-25.6-1.024-47.104-6.144-18.432-5.12-36.352-13.312t-26.112-25.6q-9.216-17.408-7.68-35.84t7.168-36.352 11.776-34.304 6.144-28.672q0-32.768-34.816-46.08-45.056-11.264-67.584-9.216t-31.744 8.704-9.216 12.288 0 1.536q0 14.336 3.584 36.864t-3.584 43.008q-5.12 12.288-13.824 23.04t-14.848 19.968q-8.192 13.312-13.824 23.04t-4.608 12.8q2.048 4.096 9.728 5.632t11.776 3.584q5.12 3.072 6.656 9.728t7.68 11.776q10.24 10.24 12.288 17.408 1.024 4.096 0 7.168 0 8.192 1.024 19.456 1.024 9.216 2.56 20.992t4.608 23.04q6.144 26.624 14.336 37.376t19.968 13.312 28.16 0.512 39.936-2.048q17.408 1.024 35.84 1.024t32.768 8.192 22.528 22.528 13.312 28.672q4.096 17.408 6.144 35.84 3.072 23.552 3.072 47.104 0 20.48-2.048 44.544t-10.24 47.616q-17.408 48.128-51.2 71.68t-72.704 30.72q-40.96 8.192-77.824 2.048t-66.56-20.48-48.64-34.816-23.04-40.96q-3.072-16.384-0.512-32.256t7.68-30.72 12.288-28.16 12.288-25.6q9.216-19.456 11.264-34.304t0-25.088q-2.048-11.264-8.192-20.48-9.216-10.24-19.456-21.504-8.192-10.24-17.408-22.016t-15.36-26.112q-20.48-41.984-21.504-77.824 0-15.36 0.512-37.376t7.68-41.472q6.144-16.384 30.208-43.52t53.76-70.144q6.144-12.288 10.752-25.6t7.168-24.576 3.584-19.456 1.024-11.264q0-10.24-1.024-22.528t-2.048-25.6q0-6.144-1.024-20.48t2.56-31.744 12.8-35.328 28.672-32.256q15.36-11.264 36.352-15.872t39.424-5.632q21.504-1.024 45.056 1.024 19.456-7.168 40.96-11.264 18.432-4.096 43.008-7.168t51.2-3.072q89.088 2.048 149.504 27.136t99.328 61.44 59.392 78.848 29.696 78.848 10.752 61.44 1.536 26.112q1.024 17.408 12.288 31.744t26.112 29.184 30.72 30.208 27.136 33.792q21.504 38.912 23.552 69.632t-8.192 54.272-28.672 40.448-37.376 28.16-34.816 17.408-19.968 8.192q-33.792 15.36-51.712 33.792t-24.064 36.864-2.56 35.84 14.848 29.696q7.168 9.216 18.432 15.36t23.04 9.216 22.528 3.584 17.92-1.536q16.384-3.072 27.136-14.848t12.8-25.088-5.632-22.528-27.136-8.192z" fill="#d4237a" p-id="1470"></path></svg>`)
                editor.ui.registry.addSidebar('mysidebar', {
                    tooltip: 'My sidebar',
                    icon: 'comment',
                    onShow: (api) => {
                        api.element().innerHTML = 'Hello world!';
                    },
                });
            },
            init_instance_callback: function (editor) {
                // 该函数是编辑器加载后添加的图标
                editor.ui.registry.addIcon(
                    "zks",
                    `
           <svg t="1746519777119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2674" width="20" height="20">
           <path d="M167.8 689.3c-2.7 0-5.7-0.3-7.9-2.6-2.2-2.2-2.5-5.3-2.5-7.9 0.1-182.5 0.1-368.1 0.1-547.5V59.8c0-23.1 14.4-37.4 37.7-37.4h620.9c23.2 0 37.6 14.2 37.6 36.9v93.9c0 172.4 0 350.7 0.1 526.1 0 2.5-0.3 5.4-2.4 7.5s-5.1 2.5-7.6 2.4c-96.6-0.1-194.9-0.1-290-0.1h-99c-94.2 0.1-191.4 0.1-287 0.2z m-0.6-9.9h0.6c95.6-0.1 192.8-0.1 286.8-0.1h99c95 0 193.3 0 290 0.1h0.2c-0.1-175.4-0.1-353.7-0.1-526.1V59.4c0-17.2-10.1-27-27.7-27H195c-17.6 0-27.8 10-27.8 27.5v71.5c0 179.5 0 365-0.1 547.5 0.1 0.2 0.1 0.4 0.1 0.5zM194.9 990.8c-14.6 0-25.6-5.7-32.8-17.1-1.9-3-2.9-6.5-2.9-10 0-77.5 0.1-167.3-0.1-255.3 0-2 0.2-5 2.4-7.1 2.3-2.3 5.5-2.3 7.8-2.3H557.1c93.7 0 190.5 0 285.8-0.1 2.7 0 5.8 0.3 8.1 2.6 2.3 2.3 2.6 5.4 2.6 7.9-0.1 83.3-0.1 169.7 0 256.7 0.1 5.3-1.9 10.3-5.8 13.9-6.5 6.7-15.5 10.6-24.8 10.7H705.3c-167.3 0-340.2 0-510.4 0.1z m-25.8-281.9c0.2 87.8 0.1 177.5 0.1 254.8 0 1.7 0.4 3.3 1.3 4.7 5.4 8.5 13.1 12.5 24.4 12.5 170.1-0.1 343.1-0.1 510.3-0.1h117.6c6.8-0.1 13.3-2.9 18-7.8 1.9-1.8 3-4.3 2.8-7-0.1-87.1-0.1-173.4 0-256.8v-0.5h-0.6c-95.3 0.1-192.1 0.1-285.8 0.1H169.4l-0.3 0.1z" fill="#0659FF" p-id="2675"></path><path d="M382.4 533.3v-368l248.1 183-248.1 185z m9.9-348.4v328.7l221.5-165.3-221.5-163.4zM470.3 876.8h-19.2c-10.6 0-16.5-5.8-16.5-16.3v-26.1c0-11.3 5.6-16.8 17-16.8H796c13.6 0 18.6 5 18.6 18.2v23.6c0 11.8-5.6 17.4-17.5 17.4H470.3z m70.3-49.3h-89.1c-6 0-7.1 1.1-7.1 7v26c0 5.1 1.5 6.4 6.7 6.5h346c6.5 0 7.6-1.1 7.6-7.5v-23.6c0-3.8-0.4-6.2-1.3-7-0.9-0.8-3.4-1.3-7.4-1.3l-255.4-0.1zM357.4 889.6c-14 0.1-27.4-5.5-37.3-15.4-9.7-9.6-15.1-22.7-15.1-36.3 0-28.3 23.4-51.4 52.1-51.5h0.2c28.7 0 52.2 22.9 52.4 51.1 0.1 13.7-5.3 26.9-15 36.6-9.8 9.9-23.2 15.5-37.2 15.5h-0.1z m-0.3-93.3c-23.3 0.1-42.2 18.7-42.3 41.6 0 11 4.4 21.5 12.2 29.3 8 8 18.9 12.5 30.3 12.5h0.1c11.3 0 22.2-4.5 30.2-12.6 7.8-7.8 12.2-18.5 12.1-29.5-0.1-22.8-19.2-41.3-42.5-41.3h-0.1zM246.4 872.1h-35.8c-10.3-0.1-16.3-6-16.3-16-0.1-10.8-0.1-19.6 0-27.5 0.1-9.4 6.3-15.6 15.7-15.6 16.1-0.1 31-0.1 45.4 0 9.3 0 15.4 6 15.6 15.3 0.1 9.2 0.1 18.8 0 28.6-0.1 9.3-6 15.1-15.4 15.3-3.1-0.1-6.2-0.1-9.2-0.1z m-13.4-9.9h22.4c4.1-0.1 5.6-1.6 5.7-5.5 0.1-9.7 0.1-19.2 0-28.4 0-3.8-1.8-5.5-5.7-5.5-14.4-0.1-29.2-0.1-45.3 0-4.1 0-5.9 1.8-5.9 5.8-0.1 7.9-0.1 16.6 0 27.4 0 4.1 1 6.1 6.5 6.1h15.5l6.8 0.1z" fill="#F39800" p-id="2676"></path><path d="M872.5 1024H139.9c-4.2 0-7.7-3.4-7.7-7.7V51.6c0-28.5 23.1-51.6 51.6-51.6h646.9c27.3 0 49.4 22.1 49.4 49.4v966.8c0.1 4.3-3.4 7.8-7.6 7.8z m-730.2-10h727.9V49.5c0-21.8-17.7-39.4-39.4-39.4h-647c-22.9 0-41.5 18.6-41.5 41.5V1014z" fill="#0659FF" p-id="2677">
            </path></svg>`
                );
                editor.ui.registry.addButton("zks_button", {
                    icon: "zks",
                    text: "自定义按钮",
                    tooltip: "自定义对齐",
                    onAction: function () {
                        editor.insertContent("🟦 你点击了自定义按钮！");
                    },
                });
                console.log("ID为: " + editor.id + " 的编辑器已初始化完成.");
            },
            // 一些格式
            branding: true,
            block_formats: "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3",
            fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
            font_formats:
                "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
            contextmenu: "link image imagetools table spellchecker copy",
            toolbar_sticky: true,
            color_cols: 6, //颜色列表数量
            custom_colors: false, //是否显示颜色（调色盘开关）
            // color_map: [
            //     "000000",
            //     "Black",
            //     "993300",
            //     "Burnt orange",
            //     "333300",
            //     "Dark olive",
            //     "003300",
            //     "Dark green",
            //     "003366",
            //     "Dark azure",
            //     "000080",
            //     "Navy Blue",
            //     "333399",
            //     "Indigo",
            //     "333333",
            //     "Very dark gray",
            //     "800000",
            //     "Maroon",
            // ],
            // 工具栏分组
            content_langs: [
                {title: 'English', code: 'en'},
                {title: 'Spanish', code: 'es'},
                {title: 'French', code: 'fr'},
                {title: 'German', code: 'de'},
                {title: 'Portuguese', code: 'pt'},
                {title: 'Chinese', code: 'zh'}
            ],
            toolbar: "textFormat|copppp|done|other|alignment|media|addBtn",
            toolbar_groups: {
                textFormat: {
                    text: "文件操作",
                    tooltip: "Formatting",
                    items: "code undo redo restoredraft save",
                },
                copppp: {
                    text: "复制啥的",
                    tooltip: "Formatting",
                    items: "cut copy paste pastetext",
                },
                done: {
                    text: "文字样式",
                    tooltip: "Formatting",
                    items:
                        "forecolor backcolor bold italic underline strikethrough link anchor ",
                },
                other: {
                    text: "懒得写了",
                    tooltip: "Formatting",
                    items:
                        "styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |table image  charmap emoticons hr pagebreak insertdatetime preview |  fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
                },
                alignment: {
                    text: "文字对齐",
                    tooltip: "alignment",
                    items:
                        "alignleft aligncenter alignright alignjustify outdent indent ",
                },
                addBtn: {
                    icon: "girl",
                    tooltip: "自定义按钮",
                    items: "zks_button warning styles h3 fontsizeinput  language aidialog aishortcuts     pagebreak  ",
                },
            },
        });
    </script>
</head>

<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
      <textarea id="mytextarea">
        <p>内容样式过滤</p>
      <hr>
      <p>用加粗会让文字变红，</p>
        <p> 改变文字颜色会同时让文字背景为灰色</p>
      <p>，右对齐&hellip;&hellip;什么都没发生？</p>
    </textarea>
</form>

<!-- 第二种模式
<tinymce-editor
  language="zh_CN"
  height="500"
  menubar="true"
  plugins="advlist autolink lists link image charmap preview anchor
    searchreplace visualblocks code fullscreen
    insertdatetime media table code help wordcount"
  toolbar="undo redo | blocks | bold italic backcolor |
    alignleft aligncenter alignright alignjustify |
    bullist numlist outdent indent | removeformat | help"
  content_style="body
  {
    font-family:Helvetica,Arial,sans-serif;
    font-size:14px
  }"
>
  dasdsad
</tinymce-editor>
<script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js"></script> -->
</body>
</html>
